<template>
  <div
    class="model-box"
    :style="{top:top,right:right,width:modelW,height:modelH,backgroundImage:'url('+borderBg+')'}"
  >
    <div class="box-title">
      <span class="sp-title">{{title}}</span>
    </div>
    <el-table
      size="mini"
      class="custometable"
      :data="warningDatas.slice(0,5)"
      @row-click="onRowClick"
    >
      <!-- :row-style="tableRowStyle" :header-cell-style="tableHeaderColor" -->
      <!-- style="padding-right:100px;padding-left:100px;background-color:#000000;background-color:rgba(0,0,0,0.2);" -->
      <el-table-column
        fixed
        prop="alarmTime"
        width="130px"
        :show-overflow-tooltip="true"
        label="预警时间"
      >
        <template slot-scope="scope">{{scope.row.alarmTime | filterTime}}</template>
      </el-table-column>
      <el-table-column fixed prop="alarmData" :show-overflow-tooltip="true" label="预警内容">
        <template
          v-if="scope.row.alarmData"
          slot-scope="scope"
        >{{ scope.row.alarmData!=""?JSON.parse(scope.row.alarmData).descp:""}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { GetAlarmsList } from "@/api/portalApi";
import { GetDeviceLocationList, GetDeviceInfo } from "@/api/device";
export default {
  name: "Latestwarning",
 
  data() {
    return {
      isLoading: false,
      timer: null,
      warningDatas: [
        {
          reporttime: "2019-09-11 09:01",
          reportcontent: "新吴区 新丰苑社区 新丰苑二期 窨井盖损坏"
        },
        {
          reporttime: "2019-09-11 09:05",
          reportcontent: "新吴区 新丰苑社区 新丰苑东区 窨井盖丢失"
        },
        {
          reporttime: "2019-09-11 09:10",
          reportcontent: "新吴区 新丰苑社区 新丰苑二期 163栋左 电梯损坏"
        },
        {
          reporttime: "2019-09-11 09:15",
          reportcontent: "新吴区 新丰苑社区 新丰苑二期 163栋左 电梯损坏"
        },
        {
          reporttime: "2019-09-11 09:20",
          reportcontent: "新吴区 新丰苑社区 新丰苑二期 163栋左 电梯损坏"
        }
      ],
      borderBg: require("@/assets/images/bg_info.png")
    };
  },
  props: {
    modelW: {
      type: String,
      default: "25.5rem"
    },
    modelH: {
      type: String,
      default: "14.8rem"
    },
    top: {
      type: String,
      default: "50%"
    },
    right: {
      type: String,
      default: "1.5rem"
    },
    title: {
      type: String,
      default: "最新预警信息"
    },
    id: {
      type: [String, Number, Object]
    },
    leader: {
      type: String,
      default: ""
    }
  },
  mounted() {
    this.getAlarmsList();
  },
  created() {},
  watch: {
    leader: function() {
      this.getAlarmsList();
    }
  },
  methods: {
    onRowClick: async (row, column, event) => {
      await GetDeviceInfo(row.deviceId);
    },
    async getDeviceInfo(deviceId) {},
    async getAlarmsList() {
      try {
        let params = {
          pageNum: "1",
          pageSize: "20",
          code: this.leader
        };
        this.stop();
        if (this.id) {
          Object.assign(params, { id: this.id });
        }
        let waringList = await GetAlarmsList(params);
        waringList.rows.reverse();
        this.warningDatas = waringList.rows;
        if (this.warningDatas.length > 0) {
          this.play();
        }
      } catch (error) {
        console.log(error);
      }
    },
    change() {
      //change、paly表格数据动态滚动
      this.warningDatas.push(this.warningDatas[0]); //把第一条数据插入数组最有一条
      this.warningDatas.shift(); //删除数组中第一条数据
    },
    play() {
      this.timer = setInterval(this.change, 2000); //每两秒执行一次插入删除操作
    },
    stop() {
      clearInterval(this.timer);
    }
  }
};
</script>
<style lang="less" scoped>
.model-box {
  position: absolute;
  z-index: 1000;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  .box-title {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
    color: #333;
    position: relative;
    .sp-title {
      color: #e9e9e9;
      margin: 0px 0px 4px 0px;
      font-size: 18px;
    }
    .iconfont.icon-close {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      color: #666;
    }
  }
  .box-ctx {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    box-sizing: border-box;
    .ctx-name {
      text-align: center;
      box-sizing: border-box;
      padding: 20px;
    }
    .ctx-process {
      width: 100%;
      padding: 20px 30px;
      box-sizing: border-box;
      .process-box {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 30px;
        .box-item {
          flex: 1;
          text-align: center;
          position: relative;
          font-size: 18px;
          color: #333;
          .dot {
            position: absolute;
            display: block;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #999;
            box-shadow: 0 0 2px 0px #fff;
          }
          &.active {
            color: #26c9e6;
            .dot {
              background: #26c9e6;
            }
            &:after {
              background: #26c9e6;
            }
            &:first-child:before {
              background: #26c9e6;
            }
          }
          &:after {
            content: "";
            position: absolute;
            top: -12px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #999;
          }
          &:last-child:after {
            width: 50%;
          }
          &:first-child:before {
            content: "";
            position: absolute;
            top: -12px;
            right: 50%;
            width: 50%;
            height: 2px;
            background: #999;
          }
        }
      }
      .process-name {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        margin: 20px auto;
        .label {
          width: 100px;
        }
        .name {
          width: calc(100% - 100px);
        }
      }
    }
  }
  .box-btn {
    width: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
// .custometable{
//   background-color: transparent;
// }
</style>